<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Title</title>
    </head>
    <body>
        <div id='app'>

            <!-- 路由出口 -->
            <router-view></router-view>
        </div>
        <script src='../js/vue.js'></script>
        <script src="../js/vue-router.js"></script>
        <script>
            var list = {
                template: `<div>
                            <h2>午餐列表</h2>
                            <ul>
                            <li><router-link to="/item/黄焖鸡">黄焖鸡</router-link> </li>
                            <li><router-link to="/item/手撕鸡">手撕鸡</router-link></li>
                            <li><router-link to="/item/猪肚鸡">猪肚鸡</router-link></li>
                            </ul>
                           </div>`
            }
            let item = {
                mounted() {
                    console.log(this.$route);
                    console.log(this.$router);
                },
                template: `<div>{{this.$route.params.name}}食物介绍</div>`
            }
            let routes = [
                {'path': '/', component: list},
                {'path': '/item/:name', component: item}
            ]

            let router = new VueRouter({
                routes
            })
            new Vue({
                el: "#app",
                data: {},
                router
            })
        </script>
    </body>
</html>